<template>
  <div id="app">
    <div class="image">
      <h1 style="font-family: 楷体;font-size: 60px;">中文拼写纠错系统</h1>
    </div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-document-checked"></i>文本纠错</span>
        <correct />
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-loading"></i>数据生成</span>
        <generate />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Correct from './components/Correct.vue'
import Generate from './components/Generate.vue'

export default {
  name: 'App',
  components: {
    Correct, Generate
  },
  methods: {
    
  }
}
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 5px;
  }
  .image {
    height: 109px;
    background-image: url(./assets/xtuback.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
  }
</style>
